<%--
  Created by IntelliJ IDEA.
  User: 小柒的Java
  Date: 2021/7/20
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>下拉框联动</title>
    <style>
        select{
            width: 200px;
            height: 30px;
            line-height: 30px;
        }
    </style>


    <script>
        // 1.创建xmlHttpRequest对象
        let xmlHttpRequest = new XMLHttpRequest();
        window.onload=function(){
            // 1.传入参数信息
            xmlHttpRequest.open("post","selectPAC")
            // 2.设置请求头信息
            xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
            // 3.绑定事件
            xmlHttpRequest.onreadystatechange = doProvince;
            // 4.发送请求并传入参数信息
            xmlHttpRequest.send("action=province");
        }
        function doProvince() {
            if (xmlHttpRequest.readyState==4){
                // 1.获取响应回来的值
               var data = xmlHttpRequest.responseText;
                // console.log(data);
                // 2,裁剪数据
                var p =data.split(";");
                var sele = document.getElementById("province");
                for (let i = 1; i <p.length ; i++) {
                    var pro = p[i].split(",");
                    sele.innerHTML = sele.innerHTML + '<option value="'+pro[0]+'">'+pro[1]+'</option>';
                }
            }
        }
        function getCity() {
            // 1.传入参数信息
            xmlHttpRequest.open("post","selectPAC")
            // 2.设置请求头信息
            xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
            // 3.绑定事件
            xmlHttpRequest.onreadystatechange = doCity;
            let value = document.getElementById("province").value;
            // 4.发送请求并传入参数信息
            xmlHttpRequest.send("action=city&provinceID="+value);
        }
        function doCity() {
           // 1,获取返回的xml文档对象
            let responseXML = xmlHttpRequest.responseXML;
            // 获取到所有的city标签对象
           var citys = responseXML.getElementsByTagName("city");
           // 获取select标签中的city元素
            let elementById = document.getElementById("city");
            // 清理原来标签中的内容
            elementById.innerHTML = "";
            // 循环所有的city标签对象
            for (var i=0;i<citys.length;i++){
                var id = citys[i].firstChild.firstChild.nodeValue;
                var name = citys[i].lastChild.firstChild.nodeValue;
                elementById.innerHTML=elementById.innerHTML+'<option value="'+id+'">'+name+'</option>';
            }
        }
        function getArea(){
            xmlHttpRequest.open("post","selectPAC");
            // 2.设置请求头信息
            xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
            // 3.绑定事件
            xmlHttpRequest.onreadystatechange = doArea;
            let value = document.getElementById("city").value;
            // 4.发送请求并传入参数信息
            xmlHttpRequest.send("action=area&cid="+value);
        }
        function doArea(){
            let elementById = document.getElementById("area");
            //alert(2)
            if (xmlHttpRequest.readyState==4){
               // alert(1)
               var data = xmlHttpRequest.responseText;
               // alert(data)
               var json = JSON.parse(data);
               //console.log(json);
                elementById.innerHTML="";
                for (let i = 0; i < json.length; i++) {
                    elementById.innerHTML = elementById.innerHTML+'<option value=json[i].areaID">'+json[i].areas+'</option>';
                }
            }

        }
    </script>
</head>
<body>
    <select id="province" onchange="getCity()">
        <option>--请选择省份--</option>
    </select>省
    <select id="city" onchange="getArea()">
        <option>--请选择市--</option>
    </select>市
    <select id="area">
        <option>--请选择区--</option>
    </select>区
</body>
</html>
